import React, { Component } from 'react';
import {  Modal, Form, Input, Radio, InputNumber, DatePicker } from 'antd';

const FormItem = Form.Item;
export default Form.create()(
    class extends Component {
        render() {
            const { visible, onCancel, onCreate, form, loading } = this.props;
            const { getFieldDecorator } = form;
            return (
                <Modal
                    visible={visible}
                    title="添加新交易"
                    okText="添加"
                    confirmLoading={loading}
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form layout="vertical">

                        <FormItem label="手机">
                            {getFieldDecorator('phone', {
                                rules: [
                                    { required: true, message: '请输入手机!' },
                                    {
                                        pattern: /^1\d{10}$/,
                                        message: '手机号格式错误！',
                                    },
                                ],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="服务类型">
                            {getFieldDecorator('type', {
                                rules: [{ required: true, message: '请输入服务类型!' }],
                            })(
                                <Input placeholder="例：精洗" />
                            )}
                        </FormItem>
                        <FormItem label="费用">
                            {getFieldDecorator('cost', {
                                rules: [{ required: true, message: '请输入费用!' }],
                            })(
                                <InputNumber />
                            )}
                        </FormItem>
                        <FormItem label="时间">
                            {getFieldDecorator('date', {
                                rules: [{ required: true, message: '请选择时间!' }],
                            })(
                                <DatePicker
                                    style={{ width: '50%' }}
                                    showTime
                                    format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择时间！"
                                />
                            )}
                        </FormItem>
                        <FormItem label="车牌">
                            {getFieldDecorator('license', {
                                rules: [{ required: true, message: '请输入车牌!' }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="支付方式">
                            {getFieldDecorator('payMethod', {
                                initialValue: 1,
                            })(
                                <Radio.Group>
                                    <Radio value={1}>现金</Radio>
                                    <Radio value={2}>会员卡</Radio>
                                </Radio.Group>
                            )}
                        </FormItem>
                    </Form>
                </Modal>
            );
        }
    }
);
